<template>
    <el-container class="layout-container">
        <CommonSidebar />
        <el-main class="user-center">
            <el-tabs v-model="activeTab" class="demo-tabs" sticky>
                <el-tab-pane label="历史生成" name="history">
                    <div class="masonry-grid">
                        <div v-for="item in imagesStore.historyImages" :key="item.id" class="grid-item">
                            <div class="image-card">
                                <el-image :src="item.imgUrl"
                                    :preview-src-list="[item.imgUrl]" class="grid-image" fit="cover" />
                                <div class="image-overlay">
                                    <div class="delete-icon">
                                        <el-button type="danger" :icon="Delete" circle size="small"
                                            @click.stop="deleteImage(item)" />
                                    </div>
                                    <div class="prompt-text">{{ item.prompt }}</div>
                                    <div class="action-buttons">
                                        <el-button type="info" size="small" @click.stop="copyPrompt(item.prompt)">
                                            复制提示词
                                        </el-button>
                                        <el-button type="primary" size="small" @click.stop="downloadImage(item)">
                                            下载图片
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="下载历史" name="downloads">
                    <div class="masonry-grid">
                        <div v-for="item in imagesStore.historyImages" :key="item.id" class="grid-item">
                            <div class="image-card">
                                <el-image :src="item.imgUrl" :preview-src-list="[item.imgUrl]" class="grid-image"
                                    fit="cover" />
                                <div class="image-overlay">
                                    <div class="prompt-text">{{ item.prompt }}</div>
                                    <div class="action-buttons">
                                        <el-button type="info" size="small" @click.stop="copyPrompt(item.prompt)">
                                            复制提示词
                                        </el-button>
                                        <el-button type="primary" size="small" @click.stop="downloadImage(item)">
                                            下载图片
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>

        </el-main>
    </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/modules/user'
import { useImagesStore } from '@/store/modules/images'
import CommonSidebar from '@/components/CommonSidebar.vue'
import { Delete } from '@element-plus/icons-vue'

const activeTab = ref('history')
const userStore = useUserStore()
const imagesStore = useImagesStore()

// Add delete function
const deleteImage = async (item) => {    
    console.log(item.id.slice(3))
    try {
        await imagesStore.deleteHistoryImage(item.id.slice(3))
        ElMessage.success('删除成功')
        await imagesStore.fetchHistoryImages()
    } catch (error) {
        ElMessage.error('删除失败')
    }
}

const downloadImage = (item) => {
    if (!item.imgCode) {
        ElMessage.warning('请先生成图片')
        return
    }
    // 直接创建下载链接
    const link = document.createElement('a')
    link.href = getImageUrl(item.imgCode)
    link.download = `linglong-ai-${Date.now()}.png`

    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)

    ElMessage.success('图片下载成功')
}

const deleteDownload = async (item) => {
    try {
        await imagesStore.deleteDownload(item.id)
        ElMessage.success('删除成功')
    } catch (error) {
        ElMessage.error('删除失败')
    }
}

const copyPrompt = (prompt) => {
    navigator.clipboard.writeText(prompt).then(() => {
        ElMessage.success('提示词已复制到剪贴板')
    }).catch(() => {
        ElMessage.error('复制失败')
    })
}

onMounted(async () => {
    // await userStore.fetchUserInfo()
    await imagesStore.fetchHistoryImages()
    // await imagesStore.fetchDownloadedImages()
})
</script>

<style scoped>
.layout-container {
    height: 100vh;
    display: flex;
}

.user-center {
    flex: 1;
    background: #f5f7fa;
    padding: 20px;
    overflow-y: auto;
}

.masonry-grid {
    padding-top: 20px;
    column-count: 4;
    column-gap: 20px;
}

.grid-item {
    break-inside: avoid;
    margin-bottom: 20px;
}

.image-card {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.image-card:hover {
    transform: translateY(-4px);
}

.grid-image {
    width: 100%;
    display: block;
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-card:hover .image-overlay {
    opacity: 1;
}

.prompt-text {
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    max-height: 60%;
    overflow-y: auto;
}

.action-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

@media (max-width: 1200px) {
    .masonry-grid {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    .masonry-grid {
        column-count: 1;
    }
}

.delete-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-card:hover .delete-icon {
    opacity: 1;
}

.delete-icon .el-button {
    background: rgba(255, 255, 255, 0.9);
}

.delete-icon .el-button:hover {
    background: #f56c6c;
    color: white;
}
</style>